<template>
    <div class="song-list">
        <p class="cate">
            <span class="song-cate">歌曲类目</span>
            <span class="song-num">({{songTotal}})</span>
            <span class="fans">粉丝数:{{songFans}}</span>
          </p>
          <ul>
            <li
              v-for="(song,index) in songs"
              :key="index"
              class="song-item"
              @click="selectItem(song,index)"
            >
              <h2>
                {{song.songName|fil}}
                <span class="song-album">{{song.songAlbum}}</span>
              </h2>
            </li>
          </ul>
    </div>
</template>

<script>
export default {
        props: {
            songs: {
                type: Array
            },
            singername: {
                type: String
            },
             songFans: {
                 
            },
            songTotal: {
            
            }
        },
        filters:{
        fil(tex){
            if(tex.length>13){
                return tex.slice(0,20)+"..."
            }
            return tex
        }
    },
        methods:{
            selectItem: function (item, index) {
                // eslint-disable-next-line no-console
                // console.log("点击歌曲列表")
                this.$emit("select", item, index)
            }
        }
}
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/variable.styl"
@import "../../common/stylus/mixin.styl"
.song-list
  padding-bottom:280px;
.cate {
        line-height: 30px;

        .fans {
          float: right;
        }

        .song-cate {
          font-size: 23px;
          color: white;
        }

        .song-num {
          color: gray;
        }
      }

      .song-item {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        height: 70px;

        .song-album {
          display: block;
          color: gray;
          margin-top: 5px;
          font-size: 15px;
        }
      }
</style>